<script>
import { mapState } from 'vuex'
import { orderStatusArray, paidStatusArray } from '@/constants/business/order'
import SelectAddress from '@/components/SelectAddress/SelectAddress.vue'

export default {
  name: 'order',
  components: { SelectAddress },
  data() {
    return {
      pageParams: {
        page: 1,
        pageSize: 10,
        // 订单编号:
        id: undefined,
        // 订单状态
        status: undefined,
        // 付费状态
        paymentStatus: undefined,
        // 发件人姓名
        senderName: undefined,
        // 发件人电话
        senderPhone: undefined,
        // 收件人姓名
        receiverName: undefined,
        // 收件人电话
        receiverPhone: undefined,

        // 收件人省份id
        receiverProvinceId: undefined,
        // 收件人城市id
        receiverCityId: undefined,
        // 收件人区域id
        receiverCountyId: '',

        // 发件人省份id
        sendProvinceId: undefined,
        // 发件人城市id
        sendCityId: undefined,
        // 发件人区域id
        sendCountyId: undefined

      },
      loading: false,
      paidStatusArray,
      orderStatusArray
    }
  },
  methods: {
    /*
    *
    * 获取订单分页的action
    *  */
    async fetchOrderList() {
      try {
        this.loading = true
        await this.$store.dispatch('orderStore/fetchOrderListAction', this.pageParams)
      } catch (err) {
        this.$message.error(err.message)
      } finally {
        this.loading = false
      }
    },

    /*
    *pageSize发生变化的回调函数
    *  */
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.fetchOrderList()

    },
    /*
    *page发生变化的回调函数
    *  */
    handleCurrentChange(page) {
      this.pageParams.page = page
      this.fetchOrderList()
    },
    /*
    * 获取收件人的省市区ID
    *  */
    getReceiverAddress({ provinceId, cityId, countyId }) {
      this.pageParams.receiverProvinceId = provinceId
      this.pageParams.receiverCityId = cityId
      this.pageParams.receiverCountyId = countyId
    },
    /*
    * 获取发件人的省市区ID
    * */
    getSendAddress({ provinceId, cityId, countyId }) {
      this.pageParams.sendProvinceId = provinceId
      this.pageParams.sendCityId = cityId
      this.pageParams.sendCountyId = countyId
    },
    /*
    * 点击搜索按钮的回调函数
    *  */
    handleSearch() {
      this.fetchOrderList()
    },
    /*
    * 点击重置按钮的回调函数
    *  */
    handleReset() {
      this.pageParams = {
        page: 1,
        pageSize: 10,
        // 订单编号:
        id: undefined,
        // 订单状态
        status: undefined,
        // 付费状态
        paymentStatus: undefined,
        // 发件人姓名
        senderName: undefined,
        // 发件人电话
        senderPhone: undefined,
        // 收件人姓名
        receiverName: undefined,
        // 收件人电话
        receiverPhone: undefined,

        // 收件人省份id
        receiverProvinceId: undefined,
        // 收件人城市id
        receiverCityId: undefined,
        // 收件人区域id
        receiverCountyId: '',

        // 发件人省份id
        sendProvinceId: undefined,
        // 发件人城市id
        sendCityId: undefined,
        // 发件人区域id
        sendCountyId: undefined
      }
    },
    /*
    *
    *格式化的回调函数
    *
    *  */
    formatPickType(row) {
      const PickupTypeMAP = {
        '1': '网点自寄',
        '2': '上门取件'
      }
      return PickupTypeMAP[row.pickupType] || '上门取件'
    },
    formatStatus({ status }) {
      const STATUSMAP = {
        '23000': '待取件',
        '23001': '已取件',
        '23002': '网点自寄',
        '23003': '网点入库',
        '23004': '待装车',
        '23005': '运输中',
        '23006': '网点出库',
        '23007': '待派送',
        '23008': '派送中',
        '23009': '已签收',
        '23010': '拒收',
        '23011': '已取消'
      }
      return STATUSMAP[status]
    },
    formatPaymentMethod({ paymentMethod }) {
      const PaymentMethodMAP = {
        '1': '预结',
        '2': '到付'
      }
      return PaymentMethodMAP[paymentMethod]
    },
    formatPaymentStatus({ paymentStatus }) {
      const PaymentStatusMAP = {
        '1': '未付',
        '2': '已付'
      }
      return PaymentStatusMAP[paymentStatus]
    }
  },
  computed: {
    ...mapState('orderStore', ['counts', 'orderList'])
  },
  mounted() {
    this.fetchOrderList()
  }
}
</script>

<template>
  <div class="order">
    <el-card shadow="never" class="top">
      <el-form inline label-width="100px">
        <el-form-item label="订单编号:">
          <el-input placeholder="请输入订单编号" v-model="pageParams.id"></el-input>
        </el-form-item>
        <el-form-item label="订单状态:">
          <el-select placeholder="请选择订单状态" v-model="pageParams.status">
            <el-option v-for="(item) in orderStatusArray" :label="item.label" :value="item.type" :key="item.type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付费状态:">
          <el-select placeholder="请选择订单状态" v-model="pageParams.paymentStatus">
            <el-option v-for="(item) in paidStatusArray" :value="item.type" :label="item.label" :key="item.type"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form inline label-width="100px">
        <el-form-item label="发件人姓名:">
          <el-input placeholder="请输入发件人姓名" v-model="pageParams.senderName"></el-input>
        </el-form-item>
        <el-form-item label="发件人电话:">
          <el-input placeholder="请输入发件人电话" v-model="pageParams.senderPhone"></el-input>
        </el-form-item>
        <el-form-item label="发件人地址:">
          <select-address @selectAddressSuccess="getSendAddress"></select-address>
        </el-form-item>
      </el-form>
      <el-form inline label-width="100px">
        <el-form-item label="收件人姓名:">
          <el-input placeholder="请输入收件人姓名" v-model="pageParams.receiverName"></el-input>
        </el-form-item>
        <el-form-item label="收件人电话:">
          <el-input placeholder="请输入收件人电话" v-model="pageParams.receiverPhone"></el-input>
        </el-form-item>
        <el-form-item label="收件人地址:">
          <select-address @selectAddressSuccess="getReceiverAddress"></select-address>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>

      </el-form>
    </el-card>
    <el-card shadow="never" class="bottom" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255)">
      <el-table stripe border :data="orderList" :header-cell-style="{background:'#f4f6f8',color:'#969393'}">
        <el-table-column type="index" label="序号" align="center" width="50px"></el-table-column>
        <el-table-column prop="id" label="订单编号" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="" label="运单编号" align="center" show-overflow-tooltip>
          <template #default="{row}">{{ row.transportOrder.id || '未知运单编号' }}</template>
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column :formatter="formatStatus" label="订单状态" align="center"></el-table-column>
        <el-table-column prop="senderName" label="发件人姓名" width="120px" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="senderPhone" label="发件人电话" width="120px" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="senderAddress" label="发件人地址" width="120px" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="receiverName" label="收件人姓名" width="120px" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="receiverPhone" label="收件人电话" align="center" width="120px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="receiverAddress" label="收件人地址" align="center" width="120px" show-overflow-tooltip></el-table-column>
        <el-table-column :formatter="formatPickType" label="取件类型" align="center"></el-table-column>
        <el-table-column :formatter="formatPaymentMethod" label="付费类型" align="center"></el-table-column>
        <el-table-column :formatter="formatPaymentStatus" label="付费状态" align="center"></el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template #default="{row}">
            <el-button type="text" @click="$router.push({path:'/order-detail',query:{orderId:row.id,transportOrderId:row.transportOrder.id}})">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParams.page" :page-sizes="[10, 15, 20, 25]" :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="counts" background></el-pagination>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.order {
  padding: 20px;

  .top {
    .el-form-item {
      width: 380px;
    }

    .el-input {
      width: 130%;
    }

    .el-select {
      width: 120%;
    }
  }

  .bottom {
    margin-top: 20px;

    .el-table {
      margin-bottom: 10px;
    }

    .el-pagination {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
